<template>
  <view class="f-register">
    <text class="tit rbox">注册</text>
    <view class="list cbox">
      <view
        :class="['item', 'rbox', 'box_y_center', { active: activeIndex == 0 }]"
      >
        <view class="iconfont"></view>
        <input
          class="phone"
          type="text"
          placeholder="输入手机号码"
          @focus="changeState(0)"
        />
      </view>
      <view
        :class="['item', 'rbox', 'box_y_center', { active: activeIndex == 2 }]"
      >
        <view class="iconfont"></view>
        <view class="code-wrap rbox box_y_center">
          <input
            type="text"
            class="repwd"
            placeholder="输入验证码"
            @focus="changeState(2)"
          />
          <view class="code">获取验证码</view>
        </view>
      </view>
      <view
        :class="['item', 'rbox', 'box_y_center', { active: activeIndex == 1 }]"
      >
        <view class="iconfont"></view>
        <input
          class="pwd"
          type="text"
          placeholder="设置密码"
          @focus="changeState(1)"
        />
      </view>
      <view
        :class="['item', 'rbox', 'box_y_center', { active: activeIndex == 3 }]"
      >
        <view class="iconfont"></view>
        <input
          class="pwd"
          type="text"
          placeholder="请确认密码"
          @focus="changeState(3)"
        />
      </view>
    </view>

    <view class="btn-wrap cbox box_center">
      <view class="single-btn btn-normal rbox box_center">注册</view>
      <text class="btn-txt">直接登录</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: 0,
    }
  },
  methods: {
    changeState(idx) {
      this.activeIndex = idx
    }
  }
}
</script>

<style lang="scss" scoped>
.f-register {
  padding: 40rpx 42rpx;
  min-height: 100vh;
  background-color: #f7f7f7;
  .tit {
    margin: 200rpx 0 0 50rpx;
    font-size: 66rpx;
    line-height: 1;
    font-weight: 600;
  }
  .list {
    margin-top: 80rpx;
    .item {
      padding: 26rpx 20rpx 26rpx 78rpx;
      border-radius: 46rpx;
      &.active {
        background-color: #fff;
        box-shadow: 0px 0px 20rpx rgba(0, 0, 0, 0.14);
      }
      &:not(:first-child) {
        margin-top: 20rpx;
      }
      .iconfont {
        width: 38rpx;
        height: 38rpx;
        background-color: #1de1c3;
      }
      .code-wrap,
      .phone,
      .pwd {
        margin-left: 30rpx;
        font-size: 30rpx;
        line-height: 1;
      }
      .code {
        margin-left: 20rpx;
        font-size: 26rpx;
        color: #1de1c3;
      }
    }
  }
  .btn-wrap {
    margin-top: 250rpx;
    .btn-txt {
      margin-top: 50rpx;
      font-size: 28rpx;
      line-height: 1;
      color: #1de1c3;
    }
  }
}
</style>